<template>
  <div class="page">
    <div class="file-list">
      <van-nav-bar
        title="最近浏览"
        left-text=""
        left-arrow
        :fixed="true"
        :border="false"
        @click-left="onClickLeft"
      ></van-nav-bar>
      <van-search v-model="value" placeholder="搜索" />
      <van-tabs v-model="active" swipeable color="#1989fa">
        <van-tab
          v-for="(item, index) in fileList"
          :key="index"
          :title="item.title"
        >
        <van-empty description="暂无文件" v-if="item.files.length == 0" />
          <div v-else
            class="file-items"
            v-for="(item2, index2) in item.files"
            :key="index2"
          >
            <p class="datetime">{{ item2.datemonth }}</p>
            <van-cell
              value=""
              v-for="(item3, index3) in item2.fileitems"
              :key="index3"
            >
              <template #title>
                <div class="file-item">
                  <img width="50" height="50" src="../assets/img/word.png" />
                  <div class="custom-title">
                    <p class="file-name">{{ item3.filename }}</p>
                    <p class="file-date">{{ item3.filedesc }}</p>
                  </div>
                </div>
              </template>
            </van-cell>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      active: "0",
      fileList: []
    };
  },
  mounted() {
    this.$store.commit("hideTabBar");
    this.getFileList();
  },
  methods: {
    getFileList() {
      this.$api
        .getFileList({})
        .then(e => {
          console.log(e);
          if (e.result == "success") {
            this.fileList = e.data;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onClickLeft(){
        this.$router.push("/file")
    }
  }
};
</script>

<style lang="less" scoped>
.file-list {
  height: 100px;
  /deep/ .van-icon {
    color: black !important;
  }
  /deep/ .van-tabs--line .van-tabs__wrap {
    border-bottom: 1px solid #f2f3f5;
  }
  .van-search {
      padding-top: 50px;
  }
  .file-items {
    padding: 5px 10px;
    .datetime {
      font-size: 14px;
      color: gray;
    }
    .van-cell {
      font-size: 16px;
      padding: 10px 0px;
    }
    .file-item {
      display: flex;
      justify-content: left;
      align-items: center;
      .custom-title {
        width: 300px;
        padding-left: 10px;
        .file-date {
          font-size: 13px;
        }
      }
    }
  }
}
</style>
